<template>
  <el-dialog v-model="drawer" title="回款明细" :append-to-body="true" width="600px" @close="close" custom-class="fundDetail">
    <el-form size="small" :model="form" :rules="rules" ref="ruleRefForm" label-width="70px">
        <el-row>
            <el-form-item label="订单号" prop="id">{{defaultForm.orderSn || '-'}}</el-form-item>
            <el-form-item label="客户名称" prop="name">{{defaultForm.customerName || '-'}}</el-form-item>
        </el-row>
        <el-row>
            <el-form-item label="回款金额" prop="money">
                <el-input style="width: 182px;" placeholder="请输入" @input="onVerifyNumberComma($event)" v-model="form.money"></el-input>
            </el-form-item>
            <el-form-item label="回款类型" prop="returnType">
                <el-select v-model="form.returnType" placeholder="请选择" size="small">
                <el-option
                    v-for="item in returnTypeList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                />
            </el-select>
            </el-form-item>
        </el-row>
        <el-row>
            <el-form-item label="付款方式" prop="payType">
                <el-select v-model="form.payType" placeholder="请选择" size="small">
                    <el-option
                        v-for="item in tubeList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="付款日期" prop="payTime">
                <el-date-picker style="width: 182px;" v-model="form.payTime" type="date" placeholder="请选择" size="small" value-format="YYYY-MM-DD" />
            </el-form-item>
        </el-row>
        <!-- <el-form-item label="是否开票" prop="isTicket">{{getBillType()form.isTicket || '否'}}</el-form-item> -->
        <el-form-item label="备注" prop="note">
            <el-input style="width:462px" type="textarea" v-model="form.note" :rows="2"></el-input>
        </el-form-item>
        <el-form-item label="上传附件">
            <el-upload drag :action="action" :headers="headers" :multiple="false" :limit="1" class="upload-drag" :auto-upload="true" :on-success="handleFileSuccess">
                <el-icon size="50px"><ele-UploadFilled /></el-icon>
                <div class="el-upload__text">
                    拖拽文件到这里或 <em>点击上传</em>
                </div>
            </el-upload>
        </el-form-item>
    </el-form>
    <template #footer>
        <el-row justify="center">
            <el-button size="small" type="primary" @click="submitForm(ruleRefForm)">提交</el-button>
            <el-button size="small" type="primary" plain @click="transerFund">开票</el-button>
            <el-button size="small" type="default" @click="cancelForm(ruleRefForm)">取消</el-button>
        </el-row>
      </template>
  </el-dialog>
</template>

<script>
import { computed, reactive, toRefs, ref, watch } from 'vue'
import { verifyNumberComma } from '/@/utils/toolsValidate'
import { useOrderApi } from '/@/api/order/index'
import { formatDate } from '/@/utils/formatTime'
import { storeToRefs } from 'pinia';
import { orderModelStatus } from '/@/stores/order'
import { Session } from '/@/utils/storage'
export default {
    name: 'FundDetail',
    props: {
        dialogDrawer: {
            type: Boolean,
            default: false
        },
        defaultForm: {
            type: Object,
            default(){
                return {}
            }
        }
    },
    setup(props, context) {
        const { dialogDrawer, defaultForm } = toRefs(props)
        const orderApi = useOrderApi()
        const drawer = computed({
            get: () => dialogDrawer.value,
            set: val => {
                context.emit('update:dialogDrawer', val)
            }
        })
        const storeOrder = orderModelStatus() // 订单各类状态数据
        const state = reactive({
            action: '/api/file/filaAttach/upload',
            headers: {
                '17work': Session.get('token')
            },
            form: {
                orderId: defaultForm.value.id,
                money: '',
                payType: '',
                payTime: '',
                returnType: '',
                createTime: '',
                operatorId: '',
                operatorName: '',
                note: '',
                fileUrl: ''
            },
            rules: {
                money: [{required: true, message: '请输入回款金额', trigger: 'blur'}],
                payTime: [{required: true, message: '请选择付款日期', trigger: 'blur'}],
                payType: [{required: true, message: '请选择付款渠道', trigger: 'blur'}],
                returnType: [{required: true, message: '请选择回款类型', trigger: 'blur'}]
            },
            tubeList: storeToRefs(storeOrder).payType,
            returnTypeList: storeToRefs(storeOrder).returnType, // 回款类型 
        })
        watch(() => dialogDrawer.value,
            val => {
                if(val) {
                    state.form.createTime = formatDate(new Date, 'YYYY-mm-dd HH:MM:SS')
                }
            }
        )
        const ruleRefForm = ref()
        const close = () => {
            context.emit('update:dialogDrawer', false)
            if(ruleRefForm.value){
                ruleRefForm.value.resetFields()
            }
        }
        // 保存
        const submitForm = formEl => {
            console.log(state.form)
            if (!formEl) return
            formEl.validate((valid) => {
                if (valid) {
                    orderApi.addMoney(state.form).then(() => {
                        context.emit('onSubmit', true) // 提交
                        context.emit('update:dialogDrawer', false)
                    })
                }
            })
        }
        // 取消
        const cancelForm = formEl => {
            if (!formEl) return
            formEl.resetFields()
            context.emit('update:dialogDrawer', false)
        }
        // 验证金额
        const onVerifyNumberComma = (val) => {
            // state.form.money = verifyNumberComma(val)
            state.form.money = val
        }
        // 文件上传
        const handleFileSuccess = e => {
            state.form.fileUrl = e.data.src
        }
        // 转发财务开票
        const transerFund = () => {

        }
        return {
            drawer,
            close,
            submitForm,
            cancelForm,
            onVerifyNumberComma,
            ruleRefForm,
            handleFileSuccess,
            transerFund,
            ...toRefs(state)
        }
    }
}
</script>

<style lang="scss">
.fundDetail{
    .el-form-item{
        align-items: start;
        flex: 1;
    }
    .upload-drag{
        width: 94.5%;
    }
}
</style>